import React, {PureComponent} from "react";
import {HomeWrapper, HomeLeft, HomeRight, BackTop} from "./style";
import {
    Topic,
    List,
    Recommend,
    Writer
} from './component'
import axios from "axios";
import {connect} from "react-redux";
import {actionCreators} from "./store";


class Home extends PureComponent {
    componentDidMount() {
        this.props.changeHomeData();
        this.bindEvents();
    }

    render() {
        return (
            <HomeWrapper>
                <HomeLeft>
                    <img className='banner-img'
                         src="https://upload.jianshu.io/admin_banners/web_images/5054/c9aadf71d6c4429a3960f4da0a421171805d16fc.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540"
                         alt="图片"/>
                    <Topic/>
                    <List/>
                </HomeLeft>
                <HomeRight>
                    <Recommend/>
                    <Writer/>
                </HomeRight>
                {
                    this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : null
                }
            </HomeWrapper>
        );
    }

    bindEvents() {
        window.addEventListener('scroll', this.props.changeScrollTopShow);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.props.changeScrollTopShow)
    }

    handleScrollTop() {
        window.scrollTo(0, 0)
    }


}

const mapState = (state) => ({
    showScroll: state.getIn(['home', 'showScroll'])
})
const mapDispatch = (dispatch) => ({
    changeHomeData() {
        let action = actionCreators.getHomeInfo();
        dispatch(action)
    },

    changeScrollTopShow(e) {
        if (document.documentElement.scrollTop > 400) {
            dispatch(actionCreators.toggleTopShow(true))
        } else {
            dispatch(actionCreators.toggleTopShow(false))
        }
    }
})
export default connect(mapState, mapDispatch)(Home);